<template>
  <div>
    <div class="title">
      <span class="titleContent">{{ title }}</span>
    </div>
    <div
      class="active-users card"
      style="width: 100%; height: 320px"
      ref="container"
    ></div>
    <el-dialog title="高倍病例覆盖科室" :modelValue="lookDetail" width="65%">
      <avue-crud ref="crud" :option="option">
        <template #search>
          <div class="searchList">
            <el-form :inline="true">
              <el-form-item label="科室:">
                <el-select placeholder="请选择科室" style="width: 200px">
                  <el-option label="急诊" value="1"> </el-option>
                  <el-option label="骨科" value="2"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序:">
                <el-select placeholder="排序" style="width: 200px">
                  <el-option label="占高倍病例数" value="1"> </el-option>
                  <el-option label="出院人次" value="2"> </el-option>
                </el-select>
                <el-radio-group v-model="radio" style="margin-left: 10px">
                  <el-radio :label="3">升序</el-radio>
                  <el-radio :label="6">降序</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div>
              <el-button>查询</el-button>
              <el-button>重置</el-button>
            </div>
          </div>
        </template>
      </avue-crud>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  onBeforeUnmount,
  onMounted,
  ref,
  onActivated,
  onDeactivated,
  nextTick,
} from "vue"
import * as echarts from "echarts"
let lookDetail = ref(false)
let chart = null
const option = reactive({
  height: "100%",

  showSummary: true,
  tip: false,
  searchShowBtn: false,
  refreshBtn: false, // 刷新
  columnBtn: false, // 操作列显隐
  simplePage: true,
  highlightCurrentRow: true,
  border: true,
  index: true,
  selection: false,
  viewBtn: false,
  editBtn: false,
  addBtn: false,
  emptyBtn: false,
  searchBtn: false,

  dialogClickModal: false,
  // menuWidth: "100px",
  menu: false,
  column: [
    { prop: "category", label: "时间", hide: false },
    { prop: "prodName", label: "科室", hide: false },
    { prop: "dosageForm", label: "出院人次", hide: false },
    { prop: "member", label: "医疗总费用(万元)", hide: false },
    { prop: "aprvno", label: "DIP总费用(万元)", hide: false },
    { prop: "aaa", label: "总盈亏(万元)", hide: false },
    { prop: "bbb", label: "次均费用(元)", hide: false },
  ],
})
const container = ref(null)
const props = defineProps(["title"])
const initChart = () => {
  if (chart == null) {
    chart = echarts.init(container.value)
  }
  chart.setOption({
    grid: {
      top: "65px",
      left: "120px",
      right: "65px",
      // bottom:'30px'
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        console.log(params)
        var result = ""
        var dotaDta =
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#409EFF"></span>'
        var dotaDta2 =
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(250, 104, 7)"></span>'
        result +=
          params[0].axisValue +
          "</br>" +
          dotaDta +
          "出院人次:" +
          params[0].data +
          "</br>" +
          dotaDta2 +
          "总盈亏(万元):" +
          params[1].data
        return result
      },
    },
    legend: {
      data: ["出院人次", "总盈亏(万元)"],
      x: "right",
    },

    xAxis: {
      type: "category",
      data: [
        "202401",
        "202402",
        "202403",
        "202404",
        "202405",
        "202406",
        "202407",
        "202408",
        "202409",
        "202410",
        "202411",
        "202412",
      ],
    },
    yAxis: [
      {
        name: "出院人次",
        type: "value",

        splitLine: {
          lineStyle: {
            type: "solid",
            color: "rgba(135,140,147,0.8)",
          },
        },
      },
      {
        name: "金额(万元)",
        type: "value",

        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: { type: "solid", color: "rgba(135,140,147,0.8)" },
        },
      },
    ],
    series: [
      {
        name: "出院人次",
        data: [1200, 800, 900, 420],
        type: "bar",
        barWidth: "13%",
        itemStyle: {
          emphasis: { barBorderRadius: 10 },
          normal: {
            barBorderRadius: 10,
            color: "#409EFF",
          },
        },
      },

      {
        name: "总盈亏(万元)",
        type: "line",
        yAxisIndex: 1,
        data: [-55, -40, -6, 0],

        color: "rgba(250, 104, 7)",
      },
    ],
  })
  chart.on("click", (params) => {
    lookDetail.value = true
    console.log(params)
    // self.$emit("getBar", params.name)
  })
}

onMounted(() => {
  initChart()
})
</script>
<style scoped>
.title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
}
.title::before {
  background: #108ee9;
  height: 100%;
  width: 5px;
  content: "";
  position: absolute;
  left: 0;
}
.titleContent {
  font-size: 14px;
  font-weight: 900;
}
.statisticalTime {
  font-size: 14px;
  color: rgb(93, 92, 102);
  /* color: rgb(250, 104, 7); */
  margin-left: 10px;
}
</style>
